window.onload = function () {
    var oPic = document.getElementById('pic');
    var oPrev = getByClass(oPic, 'prev')[0];
    var oNext = getByClass(oPic, 'next')[0];

    var aLi = oPic.getElementsByTagName('li');

    var arr = [];

    for (var i = 0; i < aLi.length; i++) {
        var oImg = aLi[i].getElementsByTagName('img')[0];

        arr.push([parseInt(getStyle(aLi[i], 'left')), parseInt(getStyle(aLi[i], 'top')),
        getStyle(aLi[i], 'zIndex'), oImg.width, parseFloat(getStyle(aLi[i], 'opacity') * 100)]);
    }


    oPrev.onclick = function () {
        arr.push(arr[0]);
        arr.shift();
        for (var i = 0; i < aLi.length; i++) {
            var oImg = aLi[i].getElementsByTagName('img')[0];

            aLi[i].style.zIndex = arr[i][2];
            startMove(aLi[i], { left: arr[i][0], top: arr[i][1], opacity: arr[i][4] });
            startMove(oImg, { width: arr[i][3] });
        }

    }

    oNext.onclick = function () {
        arr.unshift(arr[arr.length - 1]);
        arr.pop();
        for (var i = 0; i < aLi.length; i++) {
            var oImg = aLi[i].getElementsByTagName('img')[0];

            aLi[i].style.zIndex = arr[i][2];
            startMove(aLi[i], { left: arr[i][0], top: arr[i][1], opacity: arr[i][4] });
            startMove(oImg, { width: arr[i][3] });
        }
    }

    function getStyle(obj, name) {
        if (obj.currentStyle) { return obj.currentStyle[name]; }
        else { return getComputedStyle(obj, false)[name]; }
    }
}

function getByClass(oParent, sClass) {
    var aResult = [];
    var aEle = oParent.getElementsByTagName('*');

    for (var i = 0; i < aEle.length; i++) {
        if (aEle[i].className == sClass) {
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}